<template>
    <div class="header">
        <div class="header__icon iconfont" @click="handleBackClick">&#xe60e;</div>
        <div class="header__tlite">新建收货地址</div>
        <div class="header__new" @click="handleSave">保存</div>
    </div>
    <div class="main">
        <div class="main__inputBox">
          <div class="main__inputBox__inputItem">
            <div class="main__inputBox__inputItem__tlite">所在城市：</div>
            <input
            type="text"
            class="main__inputBox__inputItem__input"
            :placeholder="'如北京市'"
            v-model="dataObj.city"
            />
          </div>
          <div class="main__inputBox__inputItem">
            <div class="main__inputBox__inputItem__tlite">小区/大厦/学校：</div>
            <input
            type="text"
            class="main__inputBox__inputItem__input"
            :placeholder="'如理工大学国防科技园'"
            v-model="dataObj.department"
            >
          </div>
          <div class="main__inputBox__inputItem">
            <div class="main__inputBox__inputItem__tlite">楼号-门牌号：</div>
            <input type="text"
            class="main__inputBox__inputItem__input"
            :placeholder="'A号楼B层'"
            v-model="dataObj.houseNumber"
            >
          </div>
          <div class="main__inputBox__inputItem">
            <div class="main__inputBox__inputItem__tlite">收货人：</div>
            <input
            type="text"
            class="main__inputBox__inputItem__input"
            :placeholder="'请填写收货人的姓名'"
            v-model="dataObj.name"
            >
          </div>
          <div class="main__inputBox__inputItem">
            <div class="main__inputBox__inputItem__tlite">联系电话：</div>
            <input
            type="text"
            class="main__inputBox__inputItem__input"
            :placeholder="'请填写收货手机号'"
            v-model="dataObj.phone"
            >
          </div>
        </div>
    </div>
    <div class="hint" v-if="isHint">{{isHintText}}</div>
</template>

<script>
import '../../../style/iconfont.css'
import '../style/siteStyle.scss'
import { computed, reactive, ref } from 'vue'
import { post } from '../../../utils/axiosPost'
import { useRouter } from 'vue-router'

// 创建地址相关逻辑
const siteBiud = Obj => {
  const isHint = ref(false) // 提示信息逻辑
  const isHintText = ref('')// 提示信息文字

  // 点击创建逻辑
  const handleSave = () => {
    const siteData = post('/api/user/address', Obj)
    siteData.then(res => {
      if (res.errno === 0) {
        isHint.value = true
        isHintText.value = '收货地址创建成功'
        setTimeout(() => {
          isHint.value = false
          isHintText.value = ''
        }, 2000)
      } else {
        isHint.value = true
        isHintText.value = '创建出错'
        setTimeout(() => {
          isHint.value = false
          isHintText.value = ''
        }, 2000)
      }
    }).catch(e => {
      console.log(e)
    })
  }

  // 返回逻辑
  const router = useRouter()
  const handleBackClick = () => {
    router.back()
  }

  return { handleSave, isHintText, isHint, handleBackClick }
}

export default {
  name: 'NewSite',
  setup () {
    // 双向绑定input 框
    const dataObj = reactive({
      city: '',
      department: '',
      houseNumber: '',
      name: '',
      phone: ''
    })
    // 随着input框里面的值更新
    const Obj = computed(() => {
      const result = dataObj

      return result
    })
    const { handleSave, isHintText, isHint, handleBackClick } = siteBiud(Obj.value) // 新建地址逻辑

    return { dataObj, handleSave, isHintText, isHint, handleBackClick }
  }
}
</script>

<style scoped lang="scss">
@import '../../../style/mixinApi.scss';
.hint {
  @include MessCenterFn()
}
</style>
